<template>
    <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
    <div class="newBox">
    <button class="bt wt-120" @click="handlerBuild">
        新增护理项目
    </button>
  </div> 
    <t-table
      row-key="index"
      :data="data"
      :columns="COLUMNS"
      :stripe="stripe"
      :bordered="bordered"
      :hover="hover"
      :table-layout="tableLayout ? 'auto' : 'fixed'"
      :size="size"
      :show-header="showHeader"
      cell-empty-content="-"
      resizable
      lazy-load
    >
    <!-- 写序号 -->
     <template #rowIndex="{rowIndex}">{{rowIndex+1}}</template>
     <!-- 展示动态图片 -->
   <template #image="{row}">
      <div class="tdesign-demo-image-viewer__base">
          <t-image-viewer :images="[row.image]">
            <template #trigger="{ open }">
              <div class="tdesign-demo-image-viewer__ui-image">
                <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                  <span><BrowseIcon size="1.4em" /> 预览</span>
                </div>
              </div>
            </template>
          </t-image-viewer>
      </div>

   </template>

    <!-- 对价格的处理 -->
    <template #price="{row}">{{isDecimal(row.price) ? row.price : row.price+".00"}}</template>
   
    <template #op="{ row }">
      <div class="operateCon">
        <a class="btn-dl" @click="handleDelete(row.id)">删除</a>
        <a class="font-bt" @click="handlerEdit(row.id)">编辑</a>
        <a class="delete" @click="handleStatus(row)">{{row.status==0 ? "启用":"禁用"}}</a>
      </div>
    </template>
    </t-table>
    <!-- 分页和表格是两个东西，放在table 的下面 -->
    <t-pagination
      v-model="pagination.pageNum"
      v-model:pageSize="pagination.pageSize"
      :total="total"
      @change="onChange"
    />


</template>

<script setup lang="ts">
import { COLUMNS } from '../contants'

//1.接收属性
const props = defineProps({
    data:{
        type:Object,
        default: ({})
    },
    total:{
        type:Number,
        default:0
    },
    stripe:Boolean,
    bordered:Boolean,
    hover:Boolean,
    tableLayout:Boolean,
    size:String,
    showHeader:Boolean,
    pagination:Object
})

//2.接收方法
const emit = defineEmits(['onChange','handlerBuild','handlerEdit','handleDelete','handleStatus'])

//子组件使用该方法
const onChange = (pagination)=>{
    emit('onChange',pagination)
}

const handlerBuild = ()=>{
    emit('handlerBuild')
}

const handlerEdit = (val)=>{
    emit('handlerEdit',val)
}

//从父组件传方法
const handleDelete = (val)=>{
    emit('handleDelete',val)
}

const handleStatus = (row)=>{
    emit('handleStatus',row)
}


//判断子组件小数点
const isDecimal = (value)=>{
   if(String(value).indexOf(".") >-1 ){
       return true
   }
   return false
}
</script>
